<template>
  <div class="chart-item row2-left">
    <div class="chart-header">
      <h3>异常情况监控</h3>
    </div>
    <div class="alarm-cards">
      <div class="alarm-card">
        <div class="alarm-icon low-battery">
          <i class="el-icon-warning"></i>
        </div>
        <div class="alarm-info">
          <div class="alarm-title">低电量设备</div>
          <div class="alarm-count">{{ alarmData.lowBattery }}</div>
        </div>
      </div>
      <div class="alarm-card">
        <div class="alarm-icon offline">
          <i class="el-icon-remove"></i>
        </div>
        <div class="alarm-info">
          <div class="alarm-title">离线设备</div>
          <div class="alarm-count">{{ alarmData.offline }}</div>
        </div>
      </div>
      <div class="alarm-card">
        <div class="alarm-icon fault">
          <i class="el-icon-warning-outline"></i>
        </div>
        <div class="alarm-info">
          <div class="alarm-title">故障设备</div>
          <div class="alarm-count">{{ alarmData.fault }}</div>
        </div>
      </div>
      <div class="alarm-card">
        <div class="alarm-icon fence">
          <i class="el-icon-location"></i>
        </div>
        <div class="alarm-info">
          <div class="alarm-title">围栏异常</div>
          <div class="alarm-count">{{ alarmData.fence }}</div>
        </div>
      </div>
      <div class="alarm-card">
        <div class="alarm-icon temperature">
          <i class="el-icon-sunny"></i>
        </div>
        <div class="alarm-info">
          <div class="alarm-title">温度异常</div>
          <div class="alarm-count">{{ alarmData.temperature }}</div>
        </div>
      </div>
      <div class="alarm-card">
        <div class="alarm-icon humidity">
          <i class="el-icon-cloudy"></i>
        </div>
        <div class="alarm-info">
          <div class="alarm-title">湿度异常</div>
          <div class="alarm-count">{{ alarmData.humidity }}</div>
        </div>
      </div>
      <div class="alarm-card">
        <div class="alarm-icon pressure">
          <i class="el-icon-wind-power"></i>
        </div>
        <div class="alarm-info">
          <div class="alarm-title">压力异常</div>
          <div class="alarm-count">{{ alarmData.pressure }}</div>
        </div>
      </div>
      <div class="alarm-card">
        <div class="alarm-icon vibration">
          <i class="el-icon-bell"></i>
        </div>
        <div class="alarm-info">
          <div class="alarm-title">震动异常</div>
          <div class="alarm-count">{{ alarmData.vibration }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlarmMonitor',
  props: {
    alarmData: {
      type: Object,
      default: () => ({
        lowBattery: 45,
        offline: 12,
        fault: 8,
        fence: 23,
        temperature: 15,
        humidity: 7,
        pressure: 11,
        vibration: 5
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* AlarmMonitor组件特有样式 */
.chart-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.alarm-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  max-height: 400px;

  .alarm-card {
    display: flex;
    align-items: center;
    padding: 16px 12px;
    background: #f8f9fa;
    border-radius: 10px;
    min-height: 70px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .alarm-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;

      i {
        font-size: 18px;
      }

      &.low-battery {
        background: rgba(230, 162, 60, 0.1);
        i { color: #e6a23c; }
      }

      &.offline {
        background: rgba(245, 108, 108, 0.1);
        i { color: #f56c6c; }
      }

      &.fault {
        background: rgba(144, 147, 153, 0.1);
        i { color: #909399; }
      }

      &.fence {
        background: rgba(64, 158, 255, 0.1);
        i { color: #409eff; }
      }

      &.temperature {
        background: rgba(255, 159, 64, 0.1);
        i { color: #ff9f40; }
      }

      &.humidity {
        background: rgba(54, 162, 235, 0.1);
        i { color: #36a2eb; }
      }

      &.pressure {
        background: rgba(153, 102, 255, 0.1);
        i { color: #9966ff; }
      }

      &.vibration {
        background: rgba(255, 99, 132, 0.1);
        i { color: #ff6384; }
      }
    }

    .alarm-info {
      flex: 1;
      min-width: 0; /* 防止文字溢出 */

      .alarm-title {
        font-size: 13px;
        color: #606266;
        margin-bottom: 4px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .alarm-count {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
        line-height: 1;
      }
    }
  }
}

/* 滚动条样式 */
.alarm-cards::-webkit-scrollbar {
  width: 6px;
}

.alarm-cards::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.alarm-cards::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;

  &:hover {
    background: #a8a8a8;
  }
}
</style>
